<template>
  <div>
    <van-button
      style="position:fixed;top: 30px;right:0;z-index:999"
      type="primary"
    >loading:{{loading}}===finished:{{ finished }}===按钮</van-button>
    <van-list :finished="finished" @load="onLoad" finished-text="我是有底线的" v-model="loading">
      <van-cell :key="index" :title="index+'====='+item.title" v-for="(item,index) in list" />
    </van-list>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      start: 1,
      end: 20,
      list: [],
      loading: false,//加载状态 只要onLoad触发就会变成true
      finished: false,//不能上拉，到底了
    };
  },
  created () {
    // this.getData()
  },
  methods: {
    onLoad () {
      /* 初次进入也会触发，上拉就触发 */
      console.log('onLoad');

      /* 设置终止上拉条件 */
      if (this.start > 60) {
        this.finished = true//结束上拉，设置值为true就表示不能上拉了
        return
      }

      // 
      //   for (var i = 0; i < 20; i++) {
      //     this.list.push(this.list.length + 1)
      //   }

      //   this.loading = false// 结束当前加载
      // }, 3000)

      setTimeout(() => {
        this.getData()
        this.start += 20
        this.end += 18
        this.loading = false// 结束当前加载
      }, 1000)

    },
    async getData () {
      const res = await axios({
        url: 'http://124.223.73.204:8080/houses',
        params: {
          start: this.start,//当前页
          end: this.end,//每页显示多少条
          cityId: 'AREA|dbf46d32-7e76-1196'
        }
      })
      console.log(res, 888);
      this.list = [...this.list, ...res.data.body.list]
    }
  },
};
</script>
<style lang='less'  scoped>
</style>